<template>
  <div>
    <div class="search-res-item-container m-flex-col m-flex-col--top">
      <div class="search-res-item-header m-flex-row">
        <div class="m-flex-row m-flex-row--left">
          <icon name="file-paste" style="margin-right: 5px" />
          <span>{{ fileItemInfo.Filename }}</span>
        </div>
        <div>
          <t-button theme="primary" @click="skipToGitLabCode">
            <icon name="link" />
          </t-button>
        </div>
      </div>

      <div class="search-res-item-body">
        <table>
          <tbody>
            <tr
              class="code-block"
              v-for="(item, index) in codeLineList"
              :key="index">
              <td class="code-line-bar">
                <a target="_blank" :href="fileLink + '#L' + item.codeLineNum">{{
                  item.codeLineNum
                }}</a>
              </td>
              <td
                :class="{ 'code-line-active': item.isSearchLine === true }"
                class="code-text-block"
                v-highlight>
                <code>{{ item.codeStr }}</code>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from "tdesign-icons-vue";
export default {
  name: "SearchResulteItem",
  components: { Icon },
  props: {
    fileItemInfo: {
      type: Object,
      default: () => ({}),
    },
    repoItemInfo: {
      type: Object,
      default: () => ({}),
    },

    RepoLink: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      fileLink: `${this.RepoLink}/-/blob/master/${this.fileItemInfo.Filename}`,
    };
  },
  computed: {
    codeLineList() {
      const codeDetailList = this.fileItemInfo.Matches;
      if (Array.isArray(codeDetailList) && codeDetailList.length === 0) {
        return [];
      }
      let countObj = {}; //计数器
      let res = codeDetailList.reduce((res, curValue) => {
        let temp = this.jointCodeBlock(curValue);
        temp.forEach((codeLineItem) => {
          if (countObj[codeLineItem.codeLineNum] === undefined) {
            //不存在这个行号
            countObj[codeLineItem.codeLineNum] = 1;
            res.push(codeLineItem);
          }
        });
        return res;
      }, []);
      return res;
    },
  },
  created() {},
  methods: {
    skipToGitLabCode() {
      window.open(this.fileLink);
    },
    //拼接代码块
    jointCodeBlock(matches) {
      // matches结构
      // {
      //   After Array[2]
      //   Befor Array[2]
      //   Line String
      //   LineNumber  Number
      // }
      let res = [];
      const { After, Before, Line, LineNumber } = matches;
      if (Array.isArray(Before) && Before.length > 0) {
        Before.forEach((value, index) => {
          res.push({ codeLineNum: LineNumber - 2 + index, codeStr: value });
        });
      }
      res.push({ codeLineNum: LineNumber, codeStr: Line, isSearchLine: true });
      if (Array.isArray(After) && After.length > 0) {
        After.forEach((value, index) => {
          res.push({ codeLineNum: LineNumber + (index + 1), codeStr: value });
        });
      }
      return res;
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
tbody {
  box-sizing: border-box;
}
.search-res-item-container {
  width: 100%;
  border-radius: 7px;
  border: solid 1px #dcdcdc;
  overflow: hidden;
  .search-res-item-header {
    width: 100%;
    height: 60px;
    background: #f9fafb;
    box-sizing: border-box;
    padding: 0 20px;
    border-bottom: solid 1px #dcdcdc;
    font-weight: bolder;
  }
  .search-res-item-body {
    width: 100%;
    overflow-x: scroll;
    background-color: #ffffff;
    position: relative;

    .code-block {
      border-bottom: none;
      line-height: 25px;
      .code-line-bar {
        width: 40px;
        text-align: right;
        padding: 0 10px;
        overflow-x: scroll;
        border-right: solid 1px #dcdcdc;

        cursor: pointer;
        position: sticky;
        left: 0;
        background: #ffffff;

        a {
          color: #afafaf;
          &:active {
            color: #afafaf;
          }
        }
      }
      .code-text-block {
        width: calc(100% - 80px);
        padding: 0 10px;
        white-space: pre;
      }
    }
  }
  .code-line-active {
    background: #e8f3fb;
  }
}
</style>
